<template>
  <!-- 当点击该div时，触发截图功能 -->
  <div class="" @click="handleClick(devices)">
    <!-- 插槽内容，可以访问loading状态 -->
    <slot v-bind="{ loading }" />
  </div>
</template>

<script setup>
// 导入截图功能的钩子和任务存储库
import { useScreenshotAction } from '$/composables/useScreenshotAction/index.js'
import { useTaskStore } from '$/store/index.js'

// 定义组件的属性，此处为设备列表
const props = defineProps({
  devices: {
    type: Array,
    default: () => [],
  },
})

// 使用截图功能钩子，获取loading状态和触发截图的函数
const { loading, invoke: handleClick } = useScreenshotAction()

// 初始化任务存储库
const taskStore = useTaskStore()

// 监听'screenshot'任务，当有此任务时，开始执行截图
taskStore.on('screenshot', (task) => {
  taskStore.start({
    task,
    handler: handleClick,
  })
})
</script>

<style></style>
